<template>
  <z-form :layout="formState.layout" :model="formState" v-bind="formItemLayout">
    <z-form-item label="布局方式 layout">
      <z-radio-group v-model:value="formState.layout">
        <z-radio value="horizontal">Horizontal</z-radio>
        <z-radio value="vertical">Vertical</z-radio>
        <z-radio value="inline">Inline</z-radio>
      </z-radio-group>
    </z-form-item>
    <z-form-item label="Field A">
      <z-input v-model:value="formState.fieldA" placeholder="input placeholder" />
    </z-form-item>
    <z-form-item label="Field B">
      <z-input v-model:value="formState.fieldB" placeholder="input placeholder" />
    </z-form-item>
    <z-form-item :wrapper-col="buttonItemLayout.wrapperCol">
      <z-button type="primary">Submit</z-button>
    </z-form-item>
  </z-form>
</template>
<script>
  import { computed, defineComponent, reactive } from 'vue';
  export default defineComponent({
    setup() {
      const formState = reactive({
        layout: 'horizontal',
        fieldA: '',
        fieldB: '',
      });
      const formItemLayout = computed(() => {
        const {
          layout,
        } = formState;
        return layout === 'horizontal' ? {
          labelCol: {
            span: 4,
          },
          wrapperCol: {
            span: 14,
          },
        } : {};
      });
      const buttonItemLayout = computed(() => {
        const {
          layout,
        } = formState;
        return layout === 'horizontal' ? {
          wrapperCol: {
            span: 14,
            offset: 4,
          },
        } : {};
      });
      return {
        formState,
        formItemLayout,
        buttonItemLayout,
      };
    },
  
  });
  </script>